<template>
	<view class="blog-container">
		<view class="blog-header" @click="goToDetail(item)">
			<view class="blog-header-left">
				<u-avatar :src="item.user_id[0].avatar_file ? item.user_id[0].avatar_file.url : '/static/images/avatar.png'" size="25"></u-avatar>
				<text class="nickname">{{ item.user_id[0].nickname ? item.user_id[0].nickname : item.user_id[0].username }}</text>
				<uni-dateformat class="time-format" :date="item.publish_date" format="yyyy/MM/dd" :threshold="[60000, 3600000 * 24 * 30]"></uni-dateformat>
			</view>
			<view class="blog-header-right" @click.stop="actionSheetHandler(item.user_id[0]._id, item._id)">
				<text class="iconfont icon-elipsis"></text>
			</view>
		</view>

		<view class="blog">
			<u--text class="blog-title" :text="item.title" size="20" bold @click="goToDetail(item)" lines="2"></u--text>
			<u--text class="blog-content" margin="10rpx 0" lines="3" color="#888" :text="item.description" @click="goToDetail(item)"></u--text>
			<view class="images" :class="imageClass" v-if="item.images.length">
				<image v-for="(img, index) in item.images" :key="img" :src="img" mode="aspectFill" @tap="previewImage" :data-current="index" :data-urls="item.images"></image>
			</view>
		</view>

		<view class="blog-footer">
			<view class="views">
				<text class="iconfont icon-browse"></text>
				<text>{{ item.view_count }}</text>
			</view>
			<view class="comment" @click="goToDetail(item)">
				<text class="iconfont icon-comment"></text>
				<text>{{ item.comment_count ? item.comment_count : '评论' }}</text>
			</view>
			<view class="likes" :class="item.hasLike ? 'active' : ''" @click="likeClickHandler(item)">
				<text class="iconfont icon-good"></text>
				<text>{{ item.like_count ? item.like_count : '点赞' }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { likeClick } from '@/utils/tool.js';
import { store } from '@/uni_modules/uni-id-pages/common/store.js';
export default {
	name: 'blogItem',
	props: {
		item: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	data() {
		return {
			likeClickLoading: false,
			selectedId: ''
		};
	},
	mounted() {},
	methods: {
		async likeClickHandler(item) {
			if (!store.hasLogin) {
				uni.showToast({
					icon: 'none',
					title: this.getLanguageInfo('status').noLogin
				});
				return;
			}
			try {
				return await likeClick(this.userInfo.uid, item._id, this.blogDate);
			} catch (err) {
				return uni.showToast({
					title: err.msg,
					icon: 'none'
				});
			}
		},
		actionSheetHandler(blogOwnId, blogId) {
			const disableStatus = this.userInfo.uid === blogOwnId || this.uniIDHasRole('admin') || this.uniIDHasRole('manager');
			const isOwner = this.userInfo.uid === blogOwnId;
			this.$emit('closeActionSheet', { disableStatus, blogId, isOwner });
		},
		previewImage(e) {
			let { current, urls } = e.target.dataset;
			uni.previewImage({
				current,
				urls,
				loop: true
			});
		},
		goToDetail(item) {
			const articleid = item._id,
				userid = item.user_id[0]?._id;
			const that = this;
			uni.navigateTo({
				url: '/pages-blog/detail/detail',
				events: {
					updateCount(data) {
						that.$emit('updateBlog', data);
					}
				},
				complete: () => {
					setTimeout(() => {
						uni.$emit('toDetailParams', { articleid, userid });
					}, 500);
				}
			});
		}
	},
	computed: {
		imageClass() {
			const imagesLen = this.item.images.length;
			if (imagesLen === 1) return 'only';
			if (imagesLen === 2) return 'two';
			return '';
		},
		userInfo() {
			return uniCloud.getCurrentUserInfo();
		},
		getLanguageInfo() {
			return this.$t;
		},
		blogDate() {
			const that = this;
			return new Proxy(this.item, {
				get(target, key) {
					return Reflect.get(target, key);
				},
				set(target, key, value) {
					return that.$emit('updateBlog', { target, key, value });
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.blog-container {
	.blog-header {
		display: flex;
		justify-content: center;
		align-items: center;
		&-left {
			height: 50rpx;
			line-height: 50rpx;
			flex: 1;
			display: flex;
			text-align: center;
			align-items: center;
			.nickname {
				margin-left: 8rpx;
				font-weight: 500;
				font-size: 36rpx;
			}
			.time-format {
				font-size: 26rpx;
				height: 50rpx;
				line-height: 50rpx;
				color: #888;
			}
		}
		&-right {
			padding: 15rpx;
		}
	}
	.blog {
		margin: 20rpx 0;
		
		.images {
			padding: 20rpx 0 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			image {
				height: 222rpx;
			}
			// :first-child {
			// 	border-radius: 16rpx 0 0 16rpx;
			// }
			
			:nth-child(2) {
				margin: 0 12rpx;
			}
			// :last-child {
			// 	border-radius: 0 16rpx 16rpx 0;
			// }
			// :only-child {
			// 	border-radius: 16rpx;
			// }
		}
		.only {
			text-align: center;
			image {
				height: 550rpx;
				width: 600rpx;
				// background-color: yellowgreen;
			}
		}
		.two {
			image {
				height: 300rpx;
			}
			
		}
		.shadow {
			:last-child {
				::after {
					display: block;
					width: 100%;
					height: 100%;
					z-index: 10;
					background-color: rgba(0, 0, 0, 0.3);
					text-align: center;
					line-height: 222rpx;
					font-size: 60rpx;
					color: white;
					content: '+1';
				}
			}
		}
	}
	.blog-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.views,
		.comment,
		.likes {
			flex: 1;
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.iconfont {
				font-size: 40rpx;
			}
			:nth-child(1) {
				margin-right: 6rpx;
			}
		}
		.active {
			color: $active-color;
		}
	}
}
</style>
